<template>
  <div class='edit-car-container'
       v-if="visible">
    <el-dialog :visible.sync="visible"
               @close="dialogClose"
               :title="status==='update'?'编辑车辆':status==='detail'?'车辆详情':'新增车辆'">
      <el-form :model="editCarData"
               :disabled="status==='detail'"
               class="edit-car-form"
               label-width="150px"
               ref="editCarForm"
               :rules="editCarFormRules">
        <el-row>
          <el-col :span="16">
            <el-form-item label="车牌号"
                          prop="car_num"
                          required>
              <el-input v-model="editCarData.car_num"
                        :disabled="status!=='create'"
                        placeholder="请输入车牌号">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="车辆类型"
                          prop="car_type"
                          required>
              <el-select v-model="editCarData.car_type">
                <el-option v-for="(item) in carTypeList"
                           :key="item.id"
                           :label="item.car_type"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="司机姓名"
                          prop="leader"
                          required>
              <el-input v-model="editCarData.leader"
                        placeholder="请输入司机姓名">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="联系电话"
                          prop="leader_phone"
                          required>
              <el-input v-model="editCarData.leader_phone"
                        placeholder="请输入联系电话">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   v-if="status!=='detail'"
                   @click="editCar">保 存</el-button>
        <el-button @click="dialogClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { CarListApi } from '@/services/WorkCenter'
export default {
  data () {
    return {
      // 编辑车辆表单
      editCarData: {},
      // 编辑车辆表单验证规则
      editCarFormRules: {
        car_num: [
          { required: true, message: '请输入车牌号', trigger: 'blur' },
          { required: true, message: '请输入车牌号', trigger: 'change' }
        ],
        car_type: [
          { required: true, message: '请选择车辆类型', trigger: 'blur' },
          { required: true, message: '请选择车辆类型', trigger: 'change' }
        ],
        leader: [
          { required: true, message: '请输入司机姓名', trigger: 'blur' },
          { required: true, message: '请输入司机姓名', trigger: 'change' }
        ],
        leader_phone: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          { required: true, message: '请输入联系方式', trigger: 'change' },
          { min: 11, max: 11, message: '请输入有效的手机号码', trigger: 'blur' }
        ]
      },
      visible: false,
      status: 'create',
      // 车辆类型列表
      carTypeList: []
    }
  },
  methods: {
    dialogClose () {
      this.$emit('update:dialogVisible', false)
    },
    // 获取车辆类型
    getCarType () {
      CarListApi.getCarType({
        params: {
          page: 1
        }
      }).then(res => {
        console.log(res, 'get car type')
        let data = res.data
        if (data.data) {
          this.carTypeList = data.data
          window.localStorage.setItem('carTypeList', JSON.stringify(this.carTypeList))
        }
      }, err => {
        console.log(err)
      })
    },
    // 点击确定时判断是新增还是修改
    editCar () {
      this.$refs.editCarForm.validate((valid) => {
        if (valid) {
          if (this.status === 'create') {
            this.createCar()
          } else if (this.status === 'update') {
            this.updateCar()
          }
        }
      })
    },
    // 新增车辆
    createCar () {
      CarListApi.createCar({
        data: this.editCarData
      }).then(res => {
        console.log(res, 'create car')
        if (res.code === 0) {
          this.$message.success('新增车辆成功')
          this.dialogClose()
          this.$emit('callback', 'success')
        }
      }, err => {
        console.log(err)
      })
    },
    // 修改车辆
    updateCar () {
      this.editCarData.id = this.editCarData.car_id
      CarListApi.updateCar({
        data: this.editCarData
      }).then(res => {
        console.log(res, 'update car')
        if (res.code === 0) {
          this.$message.success('修改车辆成功')
          this.dialogClose()
          this.$emit('callback', 'success')
        }
      }, err => {
        console.log(err)
      })
    }
  },
  props: {
    dialogVisible: Boolean,
    dialogStatus: String,
    dialogForm: Object,
    callback: Function
  },
  watch: {
    dialogVisible (newval, oldval) {
      this.visible = newval
    },
    dialogForm: {
      handler (newval, oldval) {
        this.editCarData = JSON.parse(JSON.stringify(newval))
        if (this.editCarData.car_type) {
          this.editCarData.car_type = Number(this.editCarData.car_type) || ''
        }
      },
      deep: true
    },
    dialogStatus (newval, oldval) {
      this.status = newval
    }
  },
  created () {
    let localTypeList = localStorage.getItem('carTypeList')
    if (localTypeList) {
      this.carTypeList = JSON.parse(localTypeList)
    } else {
      this.getCarType()
    }
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.edit-car-container {
  .el-select {
    width: 100%;
  }
  .dialog-footer {
    text-align: center;
  }
}
</style>
